<template>
  <div id="contact">
    <div class="container">
      <div class="content">
        <div class="left">
          <el-card shadow="hover">
            <div class="header text">地址</div>
            <div class="text">中国地址大学（武汉）学一组团二栋523</div>
          </el-card>
          <el-card shadow="hover">
            <div class="header text">联系人</div>
            <div class="text">胡勇</div>
            <div class="text">客户服务邮箱：2385410383@qq.com</div>
          </el-card>
          <el-card shadow="hover">
            <div class="header text">联系电话</div>
            <div class="text">电话：13627223892</div>
            <div class="text">技术支持：13627223892</div>
          </el-card>
          <el-button type="primary" class="button">
            <a href="mailto:2385410383@qq.com.com?subject=这是邮件的主题&body=这是邮件的内容" rel="nofollow">发送邮件
            </a>
          </el-button>
        </div>
        <div class="right">
          <el-amap class="amap-box" :vid="'amap-vue'" :center="center" zoom="15">
            <el-amap-marker
                    :position="center"
            ></el-amap-marker>
          </el-amap>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "Contact",
    data(){
      return{
        center:[114.616926,30.455503]
      }
    }
  }
</script>

<style scoped>
  #contact {
    height: 100%;
    background-color: #ffffff;
  }

  .container {
    height: 80%;
    background-color: #f2f2f2;
    margin: 0 300px;
    padding: 50px 50px;
    opacity: 0.95;
  }

  .content {
    padding: 0 15px;
    height: 500px;
  }

  .left {
    float: left;
    width: 400px;
  }

  .left > div {
    margin-top: 50px;
  }

  .text {
    font-size: 12px;
    color: #333333;
  }

  .header {
    margin-bottom: 20px;
  }

  .text {
    margin-bottom: 10px;
  }

  .button{
    margin-left: 140px;
    margin-top: 50px;
  }
  .button a{
    color:#ffffff;
  }

  .right{
    float: right;
    width: 40%;
    height: 80%;
    margin-top: 53px;
    background-color: pink;
  }
</style>